import React, { useState } from 'react';
import { motion } from 'framer-motion';

import { SectionWrapper } from '../hoc';
import { fadeIn } from '../utils/motion';

import { expandsData } from '../constants';

const ExpandCard = ({ name, imgUrl, activePanel, index, handlePanelClick }) => {
  return (
    <motion.div
      variants={fadeIn('', 'spring', index * 0.5, 0.75)}
      key={index}
      className={`panel bg-cover bg-center bg-no-repeat	h-[80vh] rounded-[50px] text-white cursor-pointer m-[10px] relative ${
        index === activePanel ? 'active' : ''
      }`}
      style={{ background: `url(${imgUrl})` }}
      onClick={() => handlePanelClick(index)}
    >
      <h3 className="text-center text-[0.5rem] sm:text-[1rem] md:text-[1.5rem] lg:text-[3rem] absolute">
        {name}
      </h3>
    </motion.div>
  );
};

const Expand = () => {
  const [activePanel, setActivePanel] = useState(0);

  const handlePanelClick = (index) => {
    setActivePanel(index);
  };

  return (
    <div className="flex">
      {expandsData.map((panel, index) => (
        <ExpandCard
          key={panel.name}
          index={index}
          activePanel={activePanel}
          handlePanelClick={handlePanelClick}
          {...panel}
        />
      ))}
    </div>
  );
};

export default SectionWrapper(Expand, '');
